<template>

  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
     <el-form-item label="标题" prop="title">
        <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章来源" prop="forwhere">
        <el-input type="text" v-model="ruleForm.forwhere" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="关键词" prop="keywords">
        <el-input type="text" v-model="ruleForm.keywords" autocomplete="off"></el-input>
      </el-form-item>
       <el-form-item label="文章首图" prop="fileurl" >
      <el-upload

        ref="upload"
        :action="prcurl"
        list-type="picture-card"
        :limit="1"
        :before-upload="beforeAvatarUpload"
        :auto-upload="true"
        :on-change="onChange"
        :on-success="imgsuccess"
        :on-preview="preview"
        v-model="ruleForm.fileurl"
        autocomplete="off"
        accept=".jpg,.jpeg,.png,.JPG,.JPEG"

        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt=""
            >

            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!ruleForm.disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!ruleForm.disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
      </el-upload>
      <el-dialog :visible.sync="ruleForm.dialogVisible" class="img">
        <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
      </el-dialog>
      </el-form-item>





        <el-form-item label="文章内容"  prop="editorText">
        <editor id="editor_id" height="500px" width="700px"
                    :content.sync="ruleForm.editorText"
                    :afterChange="afterChange()"
                     :uploadJson="ediuil"
                      :loadStyleMode="true"
                      :allowFileManager="true"
                    @on-content-change="onContentChange"
                    :onSuccess="uploadSuccess"


                    autocomplete="off"
                    ></editor>


           </el-form-item>

      <el-form-item label="文章摘要" prop="zyao">
          <el-input type="textarea" v-model="ruleForm.zyao"></el-input>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm','file')">重置</el-button>
      </el-form-item>


      </el-form>











</div>
</template>

<script>
import editor from './kindeditors/Ckindeditor.vue'

export default {

  data () {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    var validatetitle = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入标题'));
      }
       else {
        callback();
      }
    };
    var validatewhere = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入文章来源'));
      }
       else {
        callback();
      }
    };
    var validatekeywords = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入关键词'));
      }
       else {
        callback();
      }
    };
    var validatezyao = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入文章摘要'));
      }
       else {
        callback();
      }

    };
    var validateeditorText = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入文章内容'));
      }
       else {
        callback();
      }

    };
    var valiIcon = (rule, value, callback) => {
      if (value === "") {
        callback(new Error('请上传文章首图'));
      }
       else {
        callback();
      }

    };

    return {
      prcurl:process.env.API_HOST+'/houtai/Fileupload/Fileupload/' ,
      ediuil:process.env.API_HOST+'/kindeditor/php/upload_json.php',
      ruleForm: {
        title:'',
        forwhere: '',
        keywords: '',
        age: '',
        editorTextCopy: '' ,
        editorText: '', // 双向同步的变量
        zyao:"",
        //上传图片
        files:"",
        fileurl:'',
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        hasFmt:"",

      },
      // editorText: '直接初始化值', // 双向同步的变量
      // editorTextCopy: '' , // content-change 事件回掉改变的对象

      rules: {

        fileurl:[
          {  validator: valiIcon, trigger: 'blur' }
        ],
        title: [
          { validator: validatetitle, trigger: 'blur' }
        ],
        forwhere: [
          { validator: validatewhere, trigger: 'blur' }
        ],
        keywords: [
          { validator: validatekeywords, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ],
        zyao: [
          { validator: validatezyao, trigger: 'blur' }
        ],
        editorText: [
          { validator: validateeditorText, trigger: 'blur' }
        ],
        // dialogImageUrl:[
        //   { validator: validatedialogImageUrl, trigger: 'blur' }
        // ],
      },
    }
  },
    methods: {
    onContentChange (val) {
      this.ruleForm.editorTextCopy = val;
    //  console.log(this.ruleForm.editorText)
    },
    afterChange () {
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert('submit!');
           console.log(this.ruleForm);
          this.$axios.post(process.env.API_HOST+"/houtai/index/newsadd",{ src:this.ruleForm.fileurl,title:this.ruleForm.title,forwhere:this.ruleForm.forwhere,
          keywords:this.ruleForm.keywords,content1:this.ruleForm.editorText,zyao:this.ruleForm.zyao
            }).then(res=>{
              if(res.status===200){
                 //console.log("ss");
                //console.log(res.data);
                  this.open3(res.data.msg);


              }




          }), res => {
    // 错误回调
                       console.log(res);



                 }



        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName,file) {
      //把富文本清空
      this.ruleForm.editorText="";
      //把首图上传清空
      this.handleRemove(file);
      console.log(this.ruleForm.editorTextCopy);
      this.$refs[formName].resetFields();
      console.log( this.$refs[formName]);


    },
     onChange(file,fileList){

        if(fileList.length>0){

         this.ruleForm.hasFmt = true;
         this.ruleForm.files=file;
         console.log(this.ruleForm.files);

       }else{
          this.ruleForm.hasFmt = false;
       }
   },
   //首图上传回调
   imgsuccess(response, file, fileList) {
     // /  console.log(response);

          this.ruleForm.fileurl=response.src;
          this.open3(response.msg);
        },



      uploadSuccess (response, file, fileList) {

          console.log('上传文件', response)
          this.ruleForm.fileurl=response.src;
        },
        handleRemove(file) {
          // console.log(this.ruleForm.dialogImageUrl);
           this.ruleForm.hasFmt = false;
           this.$axios.post(process.env.API_HOST+"/houtai/Fileupload/Filedele",{ src:this.ruleForm.fileurl}).then(res=>{
                     if(res.status===200){
                        //console.log("ss");
                        this.ruleForm.fileurl="";

                     }




                 }), res => {
           // 错误回调
                              console.log(res);

                        }
        this.$refs.upload.handleRemove(file);

           //console.log(file);



         },
         // submitUpload() {
         //         this.$refs.upload.submit();
         //       },
         handlePictureCardPreview(file) {
           this.ruleForm.dialogImageUrl = file.url;
           this.ruleForm.dialogVisible = true;
          // console.log(this.ruleForm.dialogImageUrl);
         },
         handleDownload(file) {
           console.log(file);
         },
         preview(file){
           console.log(file);

         },

          beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                 const isLt2M = file.size / 1024 / 1024 < 1;



                 // if (!isJPG) {
                 //   this.$message.error('上传头像图片只能是 JPG 格式!');
                 // }
                 if (!isLt2M) {
                   this.$message.error('上传头像图片大小不能超过 1MB!');
                 }

                 //return isJPG && isLt2M;
                 return isLt2M;
               },

               //反馈信息
               open3(msg) {
                      this.$message({
                        message: msg,
                        type: 'warning'
                      });
                    },

  },
  components: {
    editor
  },
}
</script>

<style>
</style>
